<template>
    <div style="height: 100%;">
        <h4 class="page-name">挑衅概率预判  > 创建编队</h4>
        <div>
            <el-table class="formation-table"
                    :data="formationList.slice((currentPage - 1) * 10,currentPage * 10)"
                    style="width: 100%"
                    :stripe="true">
                <el-table-column
                        label="ID"
                        prop="id">
                </el-table-column>
                <el-table-column
                        prop="parentShip"
                        label="指挥舰">
                </el-table-column><el-table-column
                    prop="total"
                    label="总数">
            </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showdetails(scope.row.details)" type="text" size="small">查看详情<i
                                class="el-icon-arrow-right"></i></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    :total="formationList.length"
                    :page-size="pageSize"
                    @current-change="analysisTablePageChange"
                    :current-page="currentPage">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        name: "formation",
        data() {
            return {
                formationList: [
                    {
                        id: 1,
                        parentShip: 'gas',
                        total: 4,
                    },
                    {
                        id: 2,
                        parentShip: 'gas',
                        total: 4,
                    }
                ],
                currentPage: 1,
                pageSize: 4,
            }
        },
        mounted() {
            window.showMap = false
            viewer.entities.removeAll();
        },
        methods: {
            //加载字典
            getBaseData() {
                let _self = this
                request.getBaseData().then(function (res) {
                    _self.baseData = res.data.baseData
                })
            },
            // 查询数据
            searchData() {
            },

            //显示船舰详情--表格之后
            showdetails(details) {
                this.equipDetailList = details
                this.equipTableVisible = false
                viewer.entities.removeAll();
                this.handleFlightData()
            },
            //表格换页
            analysisTablePageChange(e) {
                this.currentAnalysisPage = e;
            },
            changeTableRow(row) {
                this.selectedRowData = row;
                this.timelineList = []
                this.timelineList = row.details
            },
            tableRowClassName({row, rowIndex}) {
                if (row.id === this.selectedRowData.id) {
                    return 'highlight-row';
                }
                return '';
            },

        }
    }
</script>

<style lang="scss"  scoped>
    $item-bg-color: rgba(0, 78, 126, .8);
    $item-bg-color2: #5B82BC;
    $text-color: #ffffff;
    .page-name {
        padding: 5px 30px 5px 10px;
        border-radius: 3px;
        color: #fff;
        background: url("../assets/imgs/navigation-log/shijianzhou_bg.png");
        width: 200px;
        background-size: 100% 100%;
    }
    #map{
        display: none;
    }

    .formation-table {
        width: 100%;
        background: $item-bg-color2;
        --el-table-border-color: none;
        font-size: 12px;

    .el-button--text {
        color: #64DCFF;
        font-size: .8rem;
    }

    .table-title {
        float: left;
        padding: 6px;
        color: #fff;
        font-size: 1.2rem;
    }

    .el-table .el-table__cell {
        padding: 0;
    }

    /*分页*/
    .el-pagination {
        width: 100%;
        text-align: center;
    }

    .el-pagination__total {
        color: #fff;
    }

    .el-pagination button:disabled, .el-pagination .btn-next {
        color: #fff;
    }

    .el-pager li {
        color: #fff;
        background: $item-bg-color2;
        border: none;
    }

    .el-pager li.active {
        color: $text-color;
        background: #009FFF;
    }

    .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
        color: $text-color;
    }

    .el-pagination .btn-next, .el-pagination .btn-prev {
        color: $text-color;
        background: $item-bg-color2;
    }

    /*    表格编辑*/
    td .el-input__inner {
        height: 24px;
        line-height: 24px;
        color: #999999;
        background: none;
    }

    /*    底部边框*/
    .el-table::before {
        height: 0;
    }

    .el-dialog__title {
        color: $text-color;
    }

    .el-table tr {
        background-color: #1E3456;
        color: $text-color;
    }

    .el-table th.el-table__cell {
        background-color: #025C93;
        padding: 4px 0px;
    }

    /*鼠标悬浮背景*/
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
        background-color: #005081;
    }

    /*斑马纹*/
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background: #243E66;
    }

    /*border*/
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
        border: none;
    }

    .el-table .highlight-row {
        color: yellow;
    }

    }
</style>
